<template>
	<view class="container">
		<!-- 顶部 -->
		<view class="header-box">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
					<swiper-item v-for="url in swiperList" :key="url">
						<img style="width: 100%; height: 100%" :src="url" alt="" srcset="" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 商品区域 -->
		<view class="shop-content">
			<view class="shop-list">
				<view class="head-title">
					<view class="title-box">大麦优选</view>
					<!-- <view class="more-box">
						更多 <view><u-icon name="arrow-right"></u-icon></view>
					</view> -->
				</view>
				<view style="margin-bottom: 20rpx;">
					<u-tabs :list="list" @click="tabClick"></u-tabs>
				</view>
				<view class="shop-m-box">
					<view class="item-box" v-for="i in 10" :key='i' @click="linkMethod">
						<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
						<view class="title-name">
							AT-60消炎杀菌怎强xxx洗发水
						</view>
						<view class="price-box">
							<text style="margin-right: 10rpx;">120$</text>
							<text style="color:#000;text-decoration: line-through">180$</text>
						</view>
						<view class="footer-box">
							<text>1823人购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				swiperList: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png",
				],
				list: [{
					name: '甄选精品',
				}, {
					name: '优质服务',
				}]
			};
		},
		methods: {
			tabClick(data) {
				console.log(data);
			},
			linkMethod() {
				uni.navigateTo({
					url: '/pages-shop/ShopDetail/index'
				})
			}
		},
		created() {
			console.log('首页created');
		},
		mounted() {
			console.log('首页mounted');
		}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>